<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文章列表</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
    <table border="1px" cellspacing="0px" cellpadding="5px" width="50%" style="margin-bottom: 15px;">
        <thead>
        <tr>
            <th>ID</th>
            <th>标题</th>
            <th>创建时间</th>
        </tr>
        </thead>
        <tbody>
        {% for article in articles %}
            <tr>
                <td>{{ article.id }}</td>
                <td>{{ article.title }}</td>
                <td>{{ article.create_time|date:"Y/m/d H:i:s" }}</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
    <nav aria-label="Page navigation example">
      <ul class="pagination justify-content-center">
          <!-- 上一页 -->
          {% if page_obj.has_previous %}
              <li class="page-item">
                  <a class="page-link" href="{% url 'list' %}?page={{ page_obj.previous_page_number }}" tabindex="-1" aria-disabled="true">上一页</a>
              </li>
          {% else %}
              <li class="page-item disabled">
                  <a class="page-link" href="javascript:void(0);" tabindex="-1" aria-disabled="true">上一页</a>
              </li>
          {% endif %}
          <!-- 页码展示 -->
          {% for page in paginator.page_range %}
              {% if page == page_obj.number %}
                  <li class="page-item active"><a class="page-link" href="javascript:void(0);">{{ page }}</a></li>
              {% else %}
                  <li class="page-item"><a class="page-link" href="{% url 'list' %}?page={{ page }}">{{ page }}</a></li>
              {% endif %}
          {% endfor %}
          <!-- 下一页 -->
          {% if page_obj.has_next %}
              <li class="page-item">
                  <a class="page-link" href="{% url 'list' %}?page={{ page_obj.next_page_number }}">下一页</a>
              </li>
          {% else %}
              <li class="page-item disabled">
                  <a class="page-link" href="javascript:void(0);">下一页</a>
              </li>
          {% endif %}
      </ul>
    </nav>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>